<template>
  <div class="containner">
    <div style="display:flex;justify-content: space-around;align-items: center;padding: 0 10px;">
      <el-select v-model="deviceValue" @change="querylog" class="ml20">
        <el-option v-for="item in deviceOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="processValue" @change="querylog" class="ml20">
        <el-option v-for="item in processOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="debugValue" @change="querylog" class="ml20">
        <el-option v-for="item in debugOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <div>
        <el-input v-model="searchKey" placeholder="请输入关键词" clearable @change="onSearch" class="ml20 searchBoxLog width400">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div style="display:flex;justify-content: center;align-items: center;">
        <div class="ml20"><el-switch v-model="enableLogs"  size="large" @change="switchChange" /></div>
        <div class="ml5"><el-tooltip content="开关开启后，日志会被保存" effect="dark"><el-icon>
              <QuestionFilled />
            </el-icon></el-tooltip></div>
      </div>
    </div>
    <div ref="editorRef" class="monaco-editor" id="monacoEditorLog"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue';
import * as monaco from 'monaco-editor'
let deviceOptions = reactive<string[]>([]);
let deviceValue = ref('');
let processOptions = reactive<string[]>([]);
let processValue = ref('');
let debugOptions = reactive<string[]>([]);
let debugValue = ref('');
let searchKey = ref('');
const enableLogs = ref(false);
const props = defineProps({
  modelValue: String,
  language: { type: String, default: 'javascript' },
  theme: { type: String, default: 'vs-dark' }
})
const editorRef = ref<HTMLElement>()
let editor: monaco.editor.IStandaloneCodeEditor
const onSearch = (val: string) => {
  searchKey.value = val;
  querylog();
};
onMounted(() => {
  getDeviceOptions();
  getProcessOptions();
  getDebugOptions();
  themeChange();
  editor = monaco.editor.create(editorRef.value!, {
    value: props.modelValue,
    language: props.language,
    theme: props.theme,
    automaticLayout: true,
    minimap: { enabled: false },
    fontSize: 12,
    scrollBeyondLastLine: false,
    lineNumbers: 'on',
    readOnly: true,
    glyphMargin: false,  // 关闭字形边距
    padding: {
      top: 10,    // 上边距
      bottom: 10, // 下边距
    },
    lineNumbersMinChars: 4, // 固定行号宽度
    wordWrap: 'on',
  })
  editor.setValue('新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容');
});
const themeChange = () => {
  // 响应外部语言变化
  watch(() => props.language, (newVal) => {
    monaco.editor.setModelLanguage(editor.getModel()!, newVal)
  })

  // 响应主题变化
  watch(() => props.theme, (newVal) => {
    monaco.editor.setTheme(newVal)
  })
}
const getDeviceOptions = () => {
  deviceOptions = [
    'RK3568',
    'RK3560'
  ];
  deviceValue.value = 'RK3568';
}
const getProcessOptions = () => {
  processOptions = [
    'RK3568',
    'RK3560'
  ];
  processValue.value = 'RK3568';
}
const getDebugOptions = () => {
  debugOptions = [
    'RK3568',
    'RK3560'
  ];
  debugValue.value = 'RK3568';
}
const switchChange = (flag: boolean) => {
  if (flag) {
    saveLogs(flag);
  }
}
//查询日志
const querylog = () => {
  const device = deviceValue.value;
  const process = processValue.value;
  const debug = debugValue.value;
  const wordKey = searchKey.value;
  console.log(device);
  console.log(process);
  console.log(debug);
  console.log(wordKey);
  editor.setValue('新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容新的代码内容');
}
//查询日志
const saveLogs = (flag: any) => {
  console.log(11);
  console.log(flag);
}
</script>

<style scoped>
.containner {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  padding: 20px 0;
}

.ml20 {
  margin-left: 20px;
}

.ml5 {
  margin-left: 5px;
}

.width80 {
  width: 80px;
}
.width400 {
 width: 400px;
}
.monaco-editor {
  width: 100%;
  height: calc(100vh - 80px);
  width: calc(100% - 40px);
  margin: 20px 30px;
}
:deep(#monacoEditorLog .monaco-scrollable-element) {
  left: 40px !important;
  text-align: left;
}
</style>